<script setup lang="ts">
import { ref } from "vue";
import VShare from "../share.vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
let showShare = ref(false);
let isShow = ref(true);
let src = ref<string>(
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp10%2F210926112Z2F31-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648622546&t=4998214928f5734c5363121405a2d807"
);
let isShowbookMark = ref(true);
let toPublish = () => {
  store.commit("changeSrc", src.value);
  router.push({
    path: "/publish",
  });
};

let collectBook = () => {
  isShowbookMark.value = !isShowbookMark.value;
};
const share = () => {
  showShare.value = true;
};
let collectRead = () => {
  isShow.value = !isShow.value;
};

const close = () => {
  showShare.value = false;
};
</script>

<template>
  <div class="mainCardContainer">
    <div class="cardContent">
      <div class="bg-img">
        <img :src="src" alt="bg.jpeg" />
      </div>
      <div class="photographer">摄影 ｜ Kit Sunman</div>
      <div class="moto">
        "与其苦苦追寻失去的东西，还不如好好珍惜拥有的东西。"
      </div>
      <div class="userName">小川条</div>
    </div>
    <div class="card-options">
      <div class="option-item-first">
        <span class="iconfont icon-zhinanzhen"></span>
        <span class="desc">小记</span>
      </div>
      <div class="option-item iconfont icon-bi" @click="toPublish"></div>
      <div
        :class="
          isShowbookMark
            ? 'option-item iconfont icon-24gl-bookmarkMinus'
            : 'option-item iconfont icon-24gf-bookmarkMinus'
        "
        @click="collectBook"
      ></div>
      <div class="option-item">
        <span
          :class="
            isShow ? 'iconfont icon-weiguanzhu' : 'iconfont icon-yiguanzhu'
          "
          @click="collectRead"
        ></span>
        <span class="desc">1970</span>
      </div>
      <div class="option-item iconfont icon-31zhuanfa" @click="share"></div>
    </div>
  </div>
  <v-share @close="close" :showShare="showShare" />
</template>

<style lang="less" scoped>
.mainCardContainer {
  background: #fff;
  padding-top: 50px;
  padding-bottom: 20px;
  .cardContent {
    box-shadow: 1px 1px 5px 1px #999;
    border-radius: 20px;
    margin: 20px;
    overflow: hidden;
    .bg-img {
      width: 100%;
      height: 230px;
      overflow: hidden;
      img {
        width: 100%;
        height: auto;
      }
    }
    .photographer {
      margin-top: 10px;
      font-size: 14px;
      text-align: center;
      color: #999;
    }
    .moto {
      padding: 25px;
      margin-top: 20px;
      color: #666;
      line-height: 25px;
    }
    .userName {
      margin-top: 30px;
      margin-bottom: 20px;
      text-align: center;
      color: #999;
    }
  }
  .card-options {
    display: flex;
    justify-content: space-around;
    margin: 0 20px;
    .iconfont {
      font-size: 30px;
    }
    .option-item {
      color: #999;
    }
    .desc {
      font-size: 14px;
    }
  }
}
</style>